import React, { Component, Fragment } from 'react';
import {Button, Row, Col,} from 'antd';
import styles from "./index.less"
import {
    G2,
    Chart,
    Geom,
    Axis,
    Tooltip,
    Coord,
    Label,
    Legend,
    View,
    Guide,
    Shape,
    Facet,
    Util
  } from "bizcharts";
  
  class Basic extends React.Component {
    render() {
      const data = [
        {
          year: "1991",
          value: 3
        },
        {
          year: "1992",
          value: 4
        },
        {
          year: "1993",
          value: 3.5
        },
        {
          year: "1994",
          value: 5
        },
        {
          year: "1995",
          value: 4.9
        },
        {
          year: "1996",
          value: 6
        },
        {
          year: "1997",
          value: 7
        },
        {
          year: "1998",
          value: 9
        },
        {
          year: "1999",
          value: 13
        }
      ];
      const cols = {
        value: {
          min: 0
        },
        year: {
          range: [0, 1]
        }
      };
      return (
        <div>
          <Chart height={400} data={data} scale={cols} forceFit>
            <Axis name="year" />
            <Axis name="value" />
            <Tooltip
              crosshairs={{
                type: "y"
              }}
            />
            <Geom type="line" position="year*value" size={2} />
            <Geom
              type="point"
              position="year*value"
              size={4}
              shape={"circle"}
              style={{
                stroke: "#fff",
                lineWidth: 1
              }}
            />
          </Chart>
        </div>
      );
    }
  }
const LabelBlockFn =(num,describe,customStyles)=>{
    return (
        <div className="LabelBlock" style={customStyles}>
            <b>
                {num}
            </b>
            <span>
                {describe}
            </span>
        </div>
    )
}
class Index extends Component{
    render(){
        return (
        <div className={styles.index}>
            <Row>
                <Col span={6}>
                    {
                        LabelBlockFn(20,"本周新增会员",{backgroundColor:"#61a3db"})
                    }
                </Col>
                <Col span={6}>
                    {
                        LabelBlockFn(20,"代发货",{backgroundColor:"#6189db"})
                    }
                </Col>
                <Col span={6}>
                    {
                        LabelBlockFn(20,"昨日订单数",{backgroundColor:"#837ece"})
                    }
                </Col>
                <Col span={6}>
                    {
                        LabelBlockFn("¥88","昨日额营业",{backgroundColor:"#1890FF"})
                    }
                </Col>
            </Row>
            <Row className="magin-t20">
                <Col span={12}>
                    <Basic/>
                </Col>
                <Col span={6}>
                    <div>
                        第一个图
                    </div>
                </Col>
                <Col span={6}>
                   <div>
                       第二个图
                   </div>
                </Col>
            </Row>
        </div>)
    }
}

export default Index;
